<template>
    <div style="width: 222px">
        <el-menu :default-openeds="['function']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                 background-color="#00192E"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 active-li>
            <el-submenu v-for="(item,index) in sideBarListUp" :key="index" :index="item.index">
                <template slot="title"><i :class=item.className></i><span slot="title">{{item.title}}</span></template>
                <el-menu-item-group>
                    <el-menu-item
                            v-for="(itemChild,index2) in item.content"
                            @click="setItem(itemChild)"
                            :value="itemChild.title"
                            :index="itemChild.index"
                            :key="index2">{{itemChild.title}}
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-menu-item v-for="(item,index) in sideBarListDown" :key="index+'down'" :index="item.index">
                <i :class="item.className"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>

            <!--      <el-menu-item index="2">-->
            <!--        <i class="el-icon-menu"></i>-->
            <!--        <span slot="title">导航二</span>-->
            <!--      </el-menu-item>-->
            <!--      <el-menu-item index="3" disabled>-->
            <!--        <i class="el-icon-document"></i>-->
            <!--        <span slot="title">导航三</span>-->
            <!--      </el-menu-item>-->
        </el-menu>
    </div>
</template>

<script>
  export default {
    name: "sideBar",
    data() {
      return {
        isCollapse: true,
        sideBarListUp: [
          {
            index: "demo",
            title: "测试功能",
            className: "el-icon-location",//图标样式
            content: []
          }, {
            index: "function",
            title: "中级DEMO",
            className: "el-icon-menu",//图标样式
            content: []
          }, {
            index: "advance",
            title: "高级功能",
            className: "el-icon-s-opportunity",//图标样式
            content: []
          }],
        sideBarListDown: [
          {
            index: "5",
            title: "导航五",
            className: "el-icon-document",//图标样式
            content: []
          }, {
            index: "6",
            title: "导航六",
            className: "el-icon-setting",//图标样式
            content: []
          }
        ]
      }
    },
    created() {
      $.ajaxSettings.async = false;
      $.getJSON('static/MenuConfig.json', (menus) => {
        this.sideBarListUp.forEach((group) => {
            menus[group["index"]].forEach((item) => {
            group.content.push({
              title: item.title,
              index: "/components/" + group.index + "/" + item.name
            })
          })
        })
      })
      $.ajaxSettings.async = true;
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      setItem(item) {
        this.$router.push(item.index)
      }
    }
  }
</script>

<style scoped>


    .el-menu-vertical-demo {
        border-right-width: 0;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        /*min-height: 400px;*/
    }

    .el-menu-item:hover {
        background-color: #696969 !important;
    }

</style>
